<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>联系人</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
			@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
		</style>
		
		<style type="text/css">
			.input-with-select .el-input-group__prepend {
				background-color: #fff;
			}
			.el-cascader{
				width:250px;
			}
			.el-button{
				font-size: 15px;
				float: right;
			}
			.box{
				text-align: center;
			}
			.el-form-item{
				width:300px;
			}
			.dialog-footer .el-col{
				text-align: center;
			}
			span{
			font-weight: normal;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div style="margin-top: 15px;">
						<div class="block">
							<template>
						   <el-select v-model="value7" placeholder="试试搜索：全部数据" @change="getValue">
						    <el-option-group v-for="group in options3" :key="group.label" :label="group.label">
						      <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						    </el-option-group>
						  </el-select>
						    </template>
							<el-input placeholder="请输入内容" style="width:50%" v-model="input5" class="input-with-select">
							<el-button slot="append" icon="el-icon-search" @click="inputConname">联系人姓名</el-button>
							</el-input>
					</div>
			</div>
			<br />
			<div>
				<span>联系人基本信息（共{{pagedata.total}}条）</span>
				<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addContact">新建联系人</el-button>
			</div>
			<br />
			
			<!-- 新建联系人 -->
			<el-dialog title="新建联系人" :visible.sync="dialogFormVisible">
			<h3>联系人</h3>
			<hr/>
			<br/>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
				<div class="smallbox">
				<el-row>
				<el-col :span="12">
					<el-form-item label="姓名" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="移动电话" prop="phone">
					<el-input v-model.number="ruleForm.phone"/>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="12">
					<el-form-item label="所有者" prop="counterpart" required>
							<el-select v-model="ruleForm.counterpart" @clear="uitemvto()" clearable filterable="" remote="" reserve-keyword placeholder="请输入关键词" :remote-method="uidremoteMethod" :loading="uidloading">
								<i slot="prefix" class="el-input__icon el-icon-search"></i>
								<el-option  v-for="item in uitemv" :key="item.value" :label="item.label" :value="item.value"> 
							</el-option>
							</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
				<!-- 性别字典表1004-->
					<el-form-item label="性别" prop="sex">
					<!-- <el-radio-group v-model="ruleForm.sex"> -->
					<!-- <el-radio v-for="item in sexes" :key="item.value" :label="item.label" :value="item.value"></el-radio> -->
						<el-radio v-model="ruleForm.sex" label="1005">男</el-radio>
						<el-radio v-model="ruleForm.sex" label="1006">女</el-radio>
					<!-- </el-radio-group> -->
					</el-form-item>
			</el-col>
			</el-row>
			</div>
			
			<div class="smallbox">
			<el-row>
			<el-col :span="12">
					<el-form-item label="联系人分类" prop="catalogue">
					<el-select v-model="ruleForm.catalogue" placeholder="请选择联系人分类">
					<el-option v-for="item in cata" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
				<el-form-item label="对应客户" prop="customer">
					<el-autocomplete v-model.trim="ruleForm.customer" :fetch-suggestions="querySearchAsync"  placeholder="请输入内容" @select="handleSelect" v-on:change="loadAll()" v-on:click="loadAll">
					 <i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-autocomplete>
				</el-form-item>
				</el-col>
			</el-row>
			</div>
			
			<br/>
			<div class="smallbox">
			<el-row>
			<el-col :span="12">
				<el-form-item label="称谓" prop="appellation">
				<el-input v-model="ruleForm.appellation"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
					<el-form-item label="证件类型" prop="dtype">
					<el-select v-model="ruleForm.dtype" placeholder="请选择证件类型">
					<el-option v-for="item in dty" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="12">
					<el-form-item label="证件号码" prop="dnumber">
					<el-input v-model.number="ruleForm.dnumber"/>
					</el-form-item>
				</el-col>
			</el-row>
			</div>
			
			<br/>
			<h3>联系方式</h3>
			<hr/>
			<br/>
			<div class="smallbox">
			<el-row>
				<el-col :span="12">
					<el-form-item label="负责业务"  prop="operations">
					<el-input v-model="ruleForm.operations"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
				<el-form-item label="电子邮箱" prop="email">
				<el-input v-model.number="ruleForm.email"/>
			</el-form-item>
			</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="12">
					<el-form-item label="邮编" prop="code">
					<el-input v-model.number="ruleForm.code"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="地址" prop="address">
			<el-input v-model="ruleForm.address"></el-input>
			</el-form-item>
				</el-col>
			</el-row>
			</div>
			
			<br/>
			<h3>其他</h3>
			<hr/>
			<br/>
			<el-row>
				<el-col :span="12">
					<el-form-item label="兴趣爱好" prop="interest">
					<el-select v-model="ruleForm.interest" placeholder="请选择兴趣爱好">
					<el-option v-for="item in inte" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="备注" prop="remarks">
					<el-input v-model.number="ruleForm.remarks"/>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="12">
					<el-form-item label="习惯" prop="habit">
					<el-select v-model="ruleForm.habit" placeholder="请选择习惯">
					<el-option v-for="item in hab" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			
			<br/>
			<h3>联系人画像</h3>
			<hr/>
			<br/>
			<el-row>
				<el-col :span="12">
					<el-form-item label="性格" prop="character">
					<el-select v-model="ruleForm.character" placeholder="请选择性格">
					<el-option v-for="item in chara" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="社交特点" prop="social">
					<el-select v-model="ruleForm.social" placeholder="请选择社交特点">
					<el-option v-for="item in soci" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="12">
					<el-form-item label="年收入" prop="income">
					<el-select v-model="ruleForm.income" placeholder="请选择年收入">
					<el-option v-for="item in inc" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="消费习惯" prop="conhabit">
					<el-select v-model="ruleForm.conhabit" placeholder="请选择消费习惯">
					<el-option v-for="item in conh" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="12">
					<el-form-item label="人员规模" prop="persize">
					<el-select v-model="ruleForm.persize" placeholder="请选择人员规模">
					<el-option v-for="item in pers" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="网址" prop="url">
					<el-input v-model.number="ruleForm.url"  style="width:200px"/>
					</el-form-item>
				</el-col>
			<br />
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-row>
				<el-col :span="8">
					<el-button type="primary"  @click="submitForm('ruleForm')">保存</el-button>
				</el-col>
				<el-col :span="4">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
				</el-col>
				<el-col :span="4">
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-col>
				</el-row>
				</div>
			</el-dialog>
			<!-- 新建联系人END -->
			
			<template>
				<el-table border :data="tableData3" tooltip-effect="dark" style="width: 100%">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column label="ID" prop="ID" width="70" align="center"></el-table-column>
				<el-table-column prop="name" label="姓名" align="center"></el-table-column>
				<el-table-column prop="custname" label="上级联系人" align="center"></el-table-column>
				<el-table-column prop="counterpart" label="所有者" align="center"></el-table-column>
				<el-table-column prop="phone" label="移动电话" align="center"></el-table-column>
				<el-table-column prop="email" label="电子邮箱" align="center"></el-table-column>
				<el-table-column prop="catalogue" label="联系人分类" align="center"></el-table-column>
				<el-table-column fixed="right" label="操作" width="110" align="center">
				  <template slot-scope="scope">
				  				<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">查看</div>								
									<i class="el-icon-document" @click="handleClick(scope.row.ID)" style="font-size: 17px;"></i>
								</el-tooltip>
								<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">编辑</div>								
									<i class="el-icon-edit" @click="updateClick(scope.row.ID)" style="font-size: 17px;"></i>
								</el-tooltip>
				  				<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">删除</div>
									<i class="el-icon-delete" style="margin: 0px 10px;font-size: 17px;"  @click="DeleteShow(scope.row.ID)"></i>
								</el-tooltip>
				  </template>
				</el-table-column>
				</el-table>
				
				<!-- 删除弹窗 -->
				<el-dialog title="提示" :visible.sync="dialogDelete" width="30%" append-to-body >
		 	 			<span>删除不可恢复，是否确定删除？</span>
			  				<span slot="footer" class="dialog-footer">
			  				<el-row>
								<el-col :span="12">
									<el-button type="primary" @click="dialogDelete = false" v-on:click="Delete" >确 定</el-button>
								</el-col>
								<el-col :span="8">
									<el-button @click="dialogDelete = false">取 消</el-button>
								</el-col>
							</el-row>
		 				</span>
					</el-dialog>
					
					
			<!-- 编辑弹窗 -->
			<el-dialog title="编辑客户" :visible.sync="dialogFormVisible2">
			<h3>联系人</h3>
			<hr/>
			<br/>
			<el-form :model="ruleForm2" :rules="rules" ref="ruleForm2" label-width="100px">
				<div class="smallbox">
				<el-row>
				<el-col :span="12">
					<el-form-item label="姓名" prop="name">
					<el-input :disabled="true" v-model="ruleForm2.name"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="移动电话" prop="phone">
					<el-input v-model.number="ruleForm2.phone"/>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="12">
					<!-- 性别字典表1004-->
						<el-form-item label="性别" prop="sex">
						<!-- <el-radio-group> -->
						<!-- <el-radio v-for="item in sexes" :key="item.value" :label="item.label" :value="item.value"></el-radio> -->
							<el-radio v-model="ruleForm2.sex" label="1005">男</el-radio>
							<el-radio v-model="ruleForm2.sex" label="1006">女</el-radio> 
						<!-- </el-radio-group> -->
						</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系人分类" prop="catalogue">
					<el-select v-model="ruleForm2.catalogue" placeholder="请选择联系人分类">
					<el-option v-for="item in cata" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			</div>
			
			<div class="smallbox">
			<el-row>
				<el-col :span="12">
				<el-form-item label="称谓" prop="appellation">
				<el-input v-model="ruleForm2.appellation"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="负责业务"  prop="operations">
					<el-input v-model="ruleForm2.operations"/>
					</el-form-item>
				</el-col>
			</el-row>
			</div>
			
			<br/>
			<h3>联系方式</h3>
			<hr/>
			<br/>
			<div class="smallbox">
			<el-row>
				<el-col :span="12">
					<el-form-item label="电子邮箱" prop="email">
					<el-input v-model.number="ruleForm2.email"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="邮编" prop="code">
					<el-input v-model.number="ruleForm2.code"/>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="12">
						<el-form-item label="地址" prop="address">
				<el-input v-model="ruleForm2.address"></el-input>
				</el-form-item>
				</el-col>
			</el-row>
			</div>
			
			<br/>
			<h3>其他</h3>
			<hr/>
			<br/>
			<el-row>
				<el-col :span="12">
					<el-form-item label="兴趣爱好" prop="interest">
					<el-select v-model="ruleForm2.interest" placeholder="请选择兴趣爱好">
					<el-option v-for="item in inte" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="备注" prop="remarks">
					<el-input v-model.number="ruleForm2.remarks"/>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="12">
					<el-form-item label="习惯" prop="habit">
					<el-select v-model="ruleForm2.habit" placeholder="请选择习惯">
					<el-option v-for="item in hab" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="性格" prop="character">
					<el-select v-model="ruleForm2.character" placeholder="请选择性格">
					<el-option v-for="item in chara" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			
			<br/>
			<h3>用户画像</h3>
			<hr/>
			<br/>
			<el-row>
				<el-col :span="12">
					<el-form-item label="社交特点" prop="social">
					<el-select v-model="ruleForm2.social" placeholder="请选择社交特点">
					<el-option v-for="item in soci" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="年收入" prop="income">
					<el-select v-model="ruleForm2.income" placeholder="请选择年收入">
					<el-option v-for="item in inc" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="12">
					<el-form-item label="消费习惯" prop="conhabit">
					<el-select v-model="ruleForm2.conhabit" placeholder="请选择消费习惯">
					<el-option v-for="item in conh" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="人员规模" prop="persize">
					<el-select v-model="ruleForm2.persize" placeholder="请选择人员规模" >
					<el-option v-for="item in pers" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="网址" prop="url">
						<el-input v-model.number="ruleForm2.url"/>
						</el-form-item>
					</el-col>
				</el-row>
				
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-row>
				<el-col :span="12">
					<el-button type="primary"  @click="onSubmitupdate()">保存</el-button>
				</el-col>
				<el-col :span="4">
					<el-button @click="dialogFormVisible2 = false">取 消</el-button>
				</el-col>
				</el-row>
				</div>
				</el-dialog>
				
				<!-- 查看弹窗 -->
				<el-dialog title="新建联系人" :visible.sync="dialogFormVisible3">
			<div class="box"><p>————————————联系人————————————</p></div>
			<el-form :model="ruleForm" :rules="rules2" ref="ruleForm" label-width="100px">
				<div class="smallbox">
				<el-row>
				<el-col :span="8">
					<el-form-item label="姓名:">
					<span>{{cna}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="移动电话:">
					<span>{{pho}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
				<el-form-item label="所有者:" required>
						<span>{{coun}}</span>
				</el-form-item>
			</el-col>
			</el-row>
			</div>
			<div class="smallbox">
			<el-row :gutter="20">
			<el-col :span="8">
				<!-- 性别字典表1004-->
					<el-form-item label="性别:">
					<span>{{sexx}}</span>
					</el-form-item>
			</el-col>
			<el-col :span="8">
					<el-form-item label="联系人分类:">
					<span>{{cata}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
				<el-form-item label="对应客户:">
					<span>{{cust}}</span>
				</el-form-item>
				</el-col>
			</el-row>
			</div>
			
			<div class="smallbox">
			<el-row :gutter="20">
			<el-col :span="8">
				<el-form-item label="称谓:">
				<span>{{appe}}</span>
				</el-form-item>
			</el-col>

			<el-col :span="8">
					<el-form-item label="证件类型:">
					<span>{{dty}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
				<el-form-item label="证件号码:">
					<span>{{dnu}}</span>
				</el-form-item>
				</el-col>
			</el-row>
			</div>
			
			<el-form-item label="电子邮箱:">
				<span>{{ema}}</span>
			</el-form-item>
			
			
			<div class="box"><p>————————————联系方式————————————</p></div>
			<div class="smallbox">
			<el-row>
				<el-col :span="8">
					<el-form-item label="负责业务: " >
					<span>{{oper}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="邮编:">
					<span>{{cod}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="地址:">
			<span>{{addr}}</span>
			</el-form-item>
				</el-col>
			</el-row>
			</div>
			
			<div class="box"><p>—————————————其他—————————————</p></div>
			<el-row>
				<el-col :span="8">
					<el-form-item label="兴趣爱好:">
					<span>{{inter}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="备注:">
					<span>{{rem}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="习惯:">
					<span>{{hab}}</span>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="8">
					<el-form-item label="性格:">
					<span>{{charac}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="社交特点:">
					<span>{{soc}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="年收入:">
					<span>{{incom}}</span>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="8">
					<el-form-item label="消费习惯:">
					<span>{{conhb}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="人员规模:">
					<span>{{persi}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="网址:">
					<span>{{urll}}</span>
					</el-form-item>
				</el-col>
			<br />
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-row>
					<el-col :span="12">
						<el-button @click="dialogFormVisible3 = false">确定</el-button>
					</el-col>
				</el-row>
			</div>
			</el-dialog>
				
				<div style="margin-top: 20px">
				<el-button @click="toggleSelection()">取消选择</el-button>
				</div>
			</template>
			
			<!-- 分页 -->
			<div class="block" style="display: block; float: left; margin-left: 400px;">
              <el-pagination @current-change="handleCurrentChange" :page-size="pagedata.pageSize" background layout="total,prev, pager, next, jumper" :total="pagedata.total">
              </el-pagination>
            </div>
		</div>
		
		<script type="text/javascript">
			var Main = {
				data() {
					//检查输入的联系人姓名是否重复，是否为空
					var checkConName = (rule, value, callback) => {
					   if(value==null||value==''){
						   callback(new Error('联系人姓名为必填项'));  
					   }
					   var _this=this;
					 	axios.get("/customer/findByConName",
			           			{
							params:{
								name:value
									}
	           					}
			           			//ajax请求成功的回调函数
			          			).then(function(response){					          				
			           			console.log("回调成功，获取了服务器端返回的值v");
			           			console.log(response.data);//返回id值
			           			console.log(_this.ruleForm.conId);
			           			if(response.data){
			           				if(_this.ruleForm.conId==response.data){
			           					callback();						           					
			           				}else{
							           	 callback(new Error('该联系人已存在，请重新命名'));							           					
			           				}
		           				
			           			}else{
			           				callback();
			           			}
			           	}).catch(function(){
			           	 callback(new Error('查询有误'));
			           	});
					 	
				       };
					
					 //检查输入的客户数据是否存在,是否为空  
					 var checkCustomer = (rule, value, callback) => {
						   if(value==null||value==''){
							   callback(new Error('对应客户为必填项'));  
						   }
					          setTimeout(() => {
					            if (this.restaurants==null||this.restaurants=='') {
					              callback(new Error('您输入的客户名称不存在，请确认后再输入'));
					            } else {
					                callback();
					            }
					          }, 1000);
					   };
					//验证手机号码
					var checkPhone = (rule, value, callback) => {
					const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
					if (!value) {
						return callback(new Error('电话号码不能为空'))
					}
					setTimeout(() => {
						// Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
						// 所以在前面加了一个+实现隐式转换
						if (!Number.isInteger(+value)) {
						callback(new Error('请输入数字值'))
						} else {
						if (phoneReg.test(value)) {
							callback()
						} else {
							callback(new Error('电话号码格式不正确'))
						}
						}
					}, 100)
					};
					//验证电子邮箱
					var checkEmail = (rule, value, callback) => {
						const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
						if (!value) {
							return callback(new Error('邮箱不能为空'))
						}
						setTimeout(() => {
							if (mailReg.test(value)) {
							callback()
							} else {
							callback(new Error('请输入正确的邮箱格式'))
							}
						}, 100)
					}
      return {
    	  options3: [
			  {
	            label: '全部数据',
	            options: [{
	            	label:'全部数据',
	            	value:'7878'
	            	}]						        		
	        	},{
	          label: '联系人分类',
	          options: []
	        }, {
	          label: '性别',
	          options: []
	        },{
	          label: '证件类型',
	          options: []
	        }],
	        value7: '',
			activeIndex: '1',
			activeIndex2: '1',
			options:[],
			ruleForm: {
				conId:'',//联系人ID
				input21:'',
				name: '',
				tel: '',
				counterpart: '',//所有者
				catalogue: '',
				operations:'',
				sex:'',
				appellation:'',
				email:'',
				code:'',
				address:'',
				dtype:'',
				dnumber:'',
				merday:'',
				habit:'',
				interest:'',
				character:'',
				social:'',
				income:'',
				conhabit:'',
				persize:'',
				url:'',
				remarks:'',
				customer:'',//客户id
			},
			rules: {
				name: [//validator:checkConName
				{ required: true, message:'姓名不能为空', trigger: 'blur' },
				{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
				],
				customer:[
					{required: true,validator:checkCustomer, trigger: 'change'
					}],
				catalogue: [
				{ required: true, message: '请选择联系人分类', trigger: 'change' }
				],
				email: [
					{ required: true, validator: checkEmail, trigger: 'blur' }
				],
				phone: [
					{ required: true, validator: checkPhone, trigger: 'blur' }
				],
				custid: [
				{ required: true, message: '上级联系人不能为空', trigger: 'change' }
				],
				sex:[
				{ required: true, message: '请选择性别', trigger: 'change' }
				],
				uitemv: [
		             { required: true, message: '所有者不能为空', trigger: 'blur' },
		          { required: true, message: '所有人不能为空', trigger: 'change' } 
		          ]
			},
			rules2:'',
			optionspay: [],
			ruleForm2:{
				name:'',
				phone:'',
				sex:'',
				catalogue:'',
				appellation:'',
				operations:'',
				email:'',
				code:'',
				address:'',
				interest:'',
				remarks:'',
				habit:'',
				character:'',
				social:'',
				income:'',
				conhabit:'',
				persize:'',
				url:'',
			},
			options: [
				{
			value: 'cname',
			label: '联系人名字',
			children: '',
			},
			{
				value: '1005',
				label: '男',
				children: '',
				},
				{
					value: '1006',
					label: '女',
					children: '',
					},
					
				],
			input5:'',
			dialogFormVisible: false,
			dialogFormVisible2:false,
			dialogFormVisible3: false,
			tableData3:[],/*全部客户*/
			pagedata:[],/*分页数据*/
			//展示数据
			cna:'',
			pho:'',
			sexx:'',
			cata:'',
			appe:'',
			oper:'',
			ema:'',
			cod:'',
			addr:'',
			inter:'',
			rem:'',
			hab:'',
			charac:'',
			soc:'',
			incom:'',
			conhb:'',
			persi:'',
			urll:'',
			coun:'',
			cust:'',
			dty:'',
			dnu:'',
			//联系人字典数据
			cata:[],
			sexes:[],
			dty:[],
			inte:[],
			hab:[],
			chara:[],
			soci:[],
			inc:[],
			conh:[],
			pers:[],
			value:'',
			item:'',
			dialogDelete:false,
			//加载所有者
			ID:'',
			id:'',//联系人id
			gdID: '',
			//动态所有者信息
			contacts:[],//联系人
			uitemv:[],//所有者（客户经理）
			uosign:[],
			uosigns:[],
			osignloading: false,
			uosign1:[],
			uosigns1:[],
			osignloading1: false,
			uitemvs: [],
			uidloading: false,
			contactes: []
			};
		},
		created:function () {
			var _self = this;
			$.ajax({
                  type: "post",
                  url: "/customer/contactPage",
                  data: {},
                  success: function (sdata) {
                	  console.log("页数打印*****："+sdata);
                	  _self.tableData3=sdata.list;
                      _self.pagedata=sdata;
                  }
            });
		},
		methods: {
			/*联系人分页*/
			handleCurrentChange(page){
				var _self=this;
				console.log("页数打印："+page);
                $.ajax({
                      type: "post",
                      url: "/customer/contactPage",
                      data: {pageNum:page,pageSize:5},
                      success: function (sdata) {
                    	  console.log("页数打印*****："+sdata);
                    	  _self.tableData3=sdata.list;
                          _self.pagedata=sdata;
                      }
                });
			},
			//选中下拉框获取数据
			getValue(){
				var _this=this;
				console.log("搜索数据："+_this.value7);
				axios.get('/customer/selectBycon?value7='+(_this.value7),
						{arrayFormat: 'brackets'}
	           			//ajax请求成功的回调函数
	          			).then(function(response){					          				
	           			console.log("回调成功，获取了服务器端返回的值v");
	           			_this.tableData3=response.data.list;
	           			_this.pagedata=response.data;
	           			/* console.log("11111:"+response.data);
	           			console.log("11111:"+response.data.listcust);
	           			console.log("22222:"+JSON.stringify(response.data.pagerer)); */
	           		_this.restaurants=response.data;
	           	}).catch(function(){
	           		console.log("显示客户初始化数据出错了");
	           	});	//这个是数据的初始化 
			},
			//模糊查询联系人姓名
			inputConname(input5){
				var _this=this;
				console.log("点击搜索："+_this.input5);
				axios.get('/customer/conLike?input5='+(_this.input5),
						{arrayFormat: 'brackets'}
	           			//ajax请求成功的回调函数
	          			).then(function(response){					          				
	           			console.log("回调成功，获取了服务器端返回的值v");
	           			_this.tableData3=response.data.list;
	           			_this.pagedata=response.data;
	           		_this.restaurants=response.data;
	           	}).catch(function(){
	           		console.log("显示客户初始化数据出错了");
	           	});
			},
			//表单初始化
			initForm(json,_this,id){
       			var ruleForm='';
       			ruleForm=_this.ruleForm;
   				if(id!=0){
   					ruleForm.conId=id;	
			  }else{
				  ruleForm.conId=null;
			  }
			},
			//编辑客户回显数据
			updateClick(row){
				var _this=this;
				var updateSource=this;
				this.dialogFormVisible2=true;
				console.log("编辑联系人的id："+row);
				_this.id=row;
				axios.post("/customer/selectOneContact",
					Qs.stringify( {
				   			'conId':row,
					   },{arrayFormat: 'brackets'}) 
					//ajax请求成功的回调函数
				).then(function(v) {
					console.log("回调成功，获取了服务器端返回的值v");
					console.log(v.data);
					//传值
					updateSource.ruleForm2.name=v.data.name;
					updateSource.ruleForm2.phone=v.data.phone;
					updateSource.ruleForm2.sex=v.data.sex+'';
					updateSource.ruleForm2.catalogue=v.data.cataee;//联系人分类
					updateSource.ruleForm2.appellation=v.data.appellation;
					updateSource.ruleForm2.operations=v.data.operations;
					updateSource.ruleForm2.email=v.data.email;
					updateSource.ruleForm2.code=v.data.code;
					updateSource.ruleForm2.address=v.data.address;
					updateSource.ruleForm2.interest=v.data.inteee;
					updateSource.ruleForm2.remarks=v.data.remarks;
					updateSource.ruleForm2.habit=v.data.habee;
					updateSource.ruleForm2.character=v.data.charaee;//性格
					updateSource.ruleForm2.social=v.data.sociee;
					updateSource.ruleForm2.income=v.data.annuee;
					updateSource.ruleForm2.conhabit=v.data.consee;
					updateSource.ruleForm2.persize=v.data.persee;
					updateSource.ruleForm2.url=v.data.url;
				})/* .catch(function() {
				console.log("出错了");
				} )*/;
			},
			//联系人信息修改方法
		       onSubmitupdate() {
					var _this=this;
					console.log('submit!');
		    	    var obj = {}; 
		    	  //联系人性别
					if(_this.ruleForm2.sex!=null&&_this.ruleForm2.sex!=''){
			    	    obj = this.sexes.find((a)=>{
				    	      return a.label ===_this.ruleForm2.sex; 
				    	    });
				    	   if(obj!=null){
					    	    _this.ruleForm2.sex=obj.value;
				    }
					}else{
						_this.ruleForm2.sex='';
					}
		    	    console.log("客户性别:"+_this.ruleForm2.sex);
					//联系人分类
					if(_this.ruleForm2.catalogue!=null&&_this.ruleForm2.catalogue!=''){
			    	    obj = this.cata.find((a)=>{
				    	      return a.label ===_this.ruleForm2.catalogue; 
				    	    });
				    	   if(obj!=null){
					    	    _this.ruleForm2.catalogue=obj.value;
				    }
					}else{
						_this.ruleForm2.catalogue='';
					}
		    	    console.log("联系人分类:"+_this.ruleForm2.catalogue);
		    	  //习惯
					if(_this.ruleForm2.habit!=null&&_this.ruleForm2.habit!=''){
			    	    obj = this.hab.find((a)=>{
				    	      return a.label ===_this.ruleForm2.habit; 
				    	    });
				    	   if(obj!=null){
					    	    _this.ruleForm2.habit=obj.value;
				    }
					}else{
						_this.ruleForm2.habit='';
					}
		    	    console.log("习惯:"+_this.ruleForm2.habit);
		    	  //兴趣爱好
					if(_this.ruleForm2.interest!=null&&_this.ruleForm2.interest!=''){
			    	    obj = this.inte.find((a)=>{
				    	      return a.label ===_this.ruleForm2.interest; 
				    	    });
				    	   if(obj!=null){
					    	    _this.ruleForm2.interest=obj.value;
				    }
					}else{
						_this.ruleForm2.interest='';
					}
		    	    console.log("兴趣爱好:"+_this.ruleForm2.interest);
		    	  //性格
					if(_this.ruleForm2.character!=null&&_this.ruleForm2.character!=''){
			    	    obj = this.chara.find((a)=>{
				    	      return a.label ===_this.ruleForm2.character; 
				    	    });
				    	   if(obj!=null){
					    	    _this.ruleForm2.character=obj.value;
				    }
					}else{
						_this.ruleForm2.character='';
					}
		    	    console.log("性格:"+_this.ruleForm2.character);
		    	  //社交特点
					if(_this.ruleForm2.social!=null&&_this.ruleForm2.social!=''){
			    	    obj = this.soci.find((a)=>{
				    	      return a.label ===_this.ruleForm2.social; 
				    	    });
				    	   if(obj!=null){
					    	    _this.ruleForm2.social=obj.value;
				    }
					}else{
						_this.ruleForm2.social='';
					}
		    	    console.log("社交特点:"+_this.ruleForm2.social);
		    	  //年收入
					if(_this.ruleForm2.income!=null&&_this.ruleForm2.income!=''){
			    	    obj = this.inc.find((a)=>{
				    	      return a.label ===_this.ruleForm2.income; 
				    	    });
				    	   if(obj!=null){
					    	    _this.ruleForm2.income=obj.value;
				    }
					}else{
						_this.ruleForm2.income='';
					}
		    	    console.log("年收入:"+_this.ruleForm2.income);
		    	  //消费习惯
					if(_this.ruleForm2.conhabit!=null&&_this.ruleForm2.conhabit!=''){
			    	    obj = this.conh.find((a)=>{
				    	      return a.label ===_this.ruleForm2.conhabit; 
				    	    });
				    	   if(obj!=null){
					    	    _this.ruleForm2.conhabit=obj.value;
				    }
					}else{
						_this.ruleForm2.conhabit='';
					}
		    	    console.log("消费习惯:"+_this.ruleForm2.conhabit);
		    	  //人员规模
					if(_this.ruleForm2.persize!=null&&_this.ruleForm2.persize!=''){
			    	    obj = this.pers.find((a)=>{
				    	      return a.label ===_this.ruleForm2.persize; 
				    	    });
				    	   if(obj!=null){
					    	    _this.ruleForm2.persize=obj.value;
				    }
					}else{
						_this.ruleForm2.persize='';
					}
		    	    console.log("人员规模:"+_this.ruleForm2.persize);
		    	    console.log("联系人id:"+_this.id);
					 axios.post('/customer/updateContact',{
						conId:this.id,
						conName:this.ruleForm2.name,
						custTel:this.ruleForm2.phone,
						custSex:this.ruleForm2.sex,
						conCatalogue:this.ruleForm2.catalogue,
						operations:this.ruleForm2.operations,
						appellation:this.ruleForm2.appellation,
						custEmail:this.ruleForm2.email,
						code:this.ruleForm2.code,
						custAddress:this.ruleForm2.address,
						interest:this.ruleForm2.interest,
						remarks:this.ruleForm2.remarks,
						habit:this.ruleForm2.habit,
						conCharacter:this.ruleForm2.character,
						socialCharacter:this.ruleForm2.social,  
						consumptionHabit:this.ruleForm2.conhabit,
						annualIncome:this.ruleForm2.income,
						personSize:this.ruleForm2.persize,
						url:this.ruleForm2.url
						},{
                       transformRequest:[
                               function(data){
                                   let params = '';
                                   for(let index in data){
                                       params +=index+'='+data[index]+'&';
                                   }
                                   return params;
                               }
                       ]
                   }).then(v=>{
                	   _this.restaurants=v.data;
		           		_this.$notify({
		           	          title: '编辑成功',
		           	          type: 'success',
		           	       	  duration:2000
		           	        });
								  }).catch(error=>{
									  console.log("出错了");
								 });
					 _this.dialogFormVisible2=false;
					 showAtRight('/customer/contacts');
				},
			//添加联系人时加载动态数据
			addContact(){
				   var _this=this;
					  axios.post("/sales/prosale/addOrderpage",
					  		//参数转换
					  		//ajax请求成功的回调函数
					  		).then(function(v){					          				
					  		console.log("回调成功，获取了服务器端返回的值v");
					  		console.log(v.data.contact);
					  		//将数据装换成界面显示
							_this.uosigns= v.data.contact.map(item => {
						        return { value: item.ID, label: item.name };
						      });
							_this.uosign=_this.uosigns;
							_this.uosigns1= v.data.contact.map(item => {
						        return { value: item.ID, label: item.name };
						      });
							_this.contactes=v.data.contact;
							_this.uitemvs= v.data.userAll.map(item => {
						        return { value: item.ID, label: item.name };
						      });
							_this.uitemv=_this.uitemvs;
							  _this.uosign1=_this.uosigns1;
							console.log(_this.uitemvs);
							_this.optionspay=v.data.opay;
							_this.options=v.data.otype;
							_this.dialogFormVisible = true;
					  }).catch(function(){
						  console.log("信息出错了");
					  });							 
				   },
				 //加载联系人
				   osignremoteMethod(query) {
					   var _this=this;
				        if (query !== '') {
				          this.osignloading = true;
				          setTimeout(() => {
				            this.osignloading = false;
				            this.uosign = _this.uosigns.filter(item => {
				              return item.label.toLowerCase()
				                .indexOf(query.toLowerCase()) > -1;
				            });
				          }, 200);
				        } else {
				          this.uosign = [];
				        }
				      },
				 //加载界面所有者
		      uidremoteMethod(query) {
				    var _this=this;
			        if (query !== '') {
			          this.uidloading = true;
			          setTimeout(() => {
			            this.uidloading = false;
			            this.uitemv = _this.uitemvs.filter(item => {
			              return item.label.toLowerCase()
			                .indexOf(query.toLowerCase()) > -1;
			            });
			          }, 200);
			        } else {
			          this.uosign = [];
			        }
			      },
			      uitemvto(){
					  	var _this=this;
					  	 _this.uitemv=_this.uitemvs;
					  },
			      handleChange(value) {
				        console.log(value);
				      },
				    //这个是列表的选择事件
					 handleSelect(item) {
					    	  var _this=this;	
						       if(item.label1!=null){
							    	  console.log(item);
						        	  this.gdID=item.label1;
							    	  console.log(this.gdID);							        	  
						        }
						      
						      },
						      //这里是数据筛选下来宽事件
							  visibleChange(){
							    	  if(this.flag){
							    		  this.flag=false;
							    		  this.screenQueries(); 								    		  
							    	  }else{
							    		  this.flag=true;

							    	  }
							    	  
							      },    
							      //这里是数据筛选标签删除时的事件
							  removeTag(){
							    	  var _this=this;
							    	  if(_this.value7[0]==null){
								    		_this.value7[0]='';
							    	  }

							      },
							   	  //这里是筛选查询的方法
							   	 screenQueries(){
							    	  var _this=this;
							    	  /*
							    	---------------------------------------数据筛选查询  
							    	 */
							    	 var data=''+_this.value7;
							    	  console.log("data:"+data);
									 	axios.get("/sales/salePageable",
							           			//参数转换
						           			{
							           		params:{
							           			pageNumber:1,
							           			pageCentent:4,
							           			DId:data
							           		}									 		
						           			}

							           			//ajax请求成功的回调函数
							          			).then(function(response){
									           			console.log("回调成功，获取了服务器端返回的值v");
									           			console.log(response.data);	
							           	}).catch(function(){
							           		//_this.form.customer=i;
							           		console.log("新增表单提交出错了");
							           	});								    		  							    	   
							      },
							  //这里是加载对应客户的方法
						      loadAll() {
							   var _this=this;
							   //AllpageNumber			   
							 	axios.get("/sales/abroadsaleCustName",
						           			{
						           		params: {
						           			custName:this.customer
						          			    }
						           			}
						           			//ajax请求成功的回调函数
						          			).then(function(response){					          				
						           			console.log("回调成功，获取了服务器端返回的值v");
						           			console.log(response.data);
						           			//console.log("修改:"+response.data.label1);						           			
						           		_this.restaurants=response.data;
						           	}).catch(function(){
						           		console.log("显示客户初始化数据出错了");
						           	});	//这个是数据的初始化
					          
							      },
									 //这个是显示查询的数据
									 querySearchAsync(queryString, cb) {
									    	 
									        var restaurants = this.restaurants;				       
									        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;	
									      // alert( cb);
									        clearTimeout(this.timeout);
									        this.timeout = setTimeout(() => { 
									       	cb(this.restaurants);
									       }, 3000 * Math.random());							       
									       // cb(results);
									       // this.timeout = setTimeout(() => { cb(results);}, 3000 * Math.random());
									        console.log("queryString1:"+queryString.length);
									        if(queryString.length==0){					       
									        	this.customer=null;
									        	 this.loadAll();
										        var restaurants = this.restaurants;				       
										        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;	
										      // alert( cb);
										        clearTimeout(this.timeout);
										        this.timeout = setTimeout(() => {
										       ;
										       	cb(this.restaurants);
										       }, 3000* Math.random());	
									        }
									      },
									    //这个是根据输入的内容筛选数据
									   createStateFilter(queryString) {
									    	  console.log("queryString2:"+queryString);
									    	  if(queryString!=null&&queryString!=" "){
									    		  this.customer=queryString;				    		  
									    	  }else{
									    		  this.customer=null; 
									    	  }					    	 
									    	  console.log("customer:"+this.customer);
									    	 // this.$options.methods.mounted();
									    	//  this.mounted();
									    	this.loadAll();
									        return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};
									      },
			//添加联系人信息
			submitForm(formName) {
			var _this=this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log('添加联系人submit!');
					var i=" ";
		    	    var obj = {};
					var _this=this;
					i=this.ruleForm.customer;
					this.ruleForm.customer=this.gdID;
					console.log("id:"+this.gdID);
					var ruleForm = this.ruleForm;
					//post提交数据
					axios.post('/customer/newContacts',
							//参数转换
							Qs.stringify(this.ruleForm,{arrayFormat:'brackets'})
							//params:
								//ajax请求成功的回调函数
					).then(function(v){
						console.log("回调成功，获取了服务器端返回的值v");
						console.log(v);
						_this.restaurants=v.data;
		           		_this.$notify({
		           	          title: '新建成功',
		           	          type: 'success',
		           	       	  duration:2000
		           	        });
						_this.dialogFormVisible=false;
						showAtRight('/customer/contacts');
					}).catch(function(){
						console.log("出错了！");
					});
					showAtRight('/customer/contacts');
					} else {
					console.log('error submit!!');
					return false;
					}
				});
				},
				//重置表单
				resetForm(formName) {
					this.$refs[formName].resetFields();
					},
			handleClick(row) {
				console.log(row);
				var _this=this;
				this.dialogFormVisible3=true;
				axios.post("/customer/selectOneContact",
						Qs.stringify( {
					   			'conId':row,
						   },{arrayFormat: 'brackets'}) 
						//ajax请求成功的回调函数
					).then(function(v) {
						console.log("回调成功，获取了服务器端返回的值v");
						console.log(v.data);
						//传值
						_this.cna=v.data.name;
						_this.pho=v.data.phone;
						_this.sexx=v.data.sexes;
						_this.cata=v.data.cataee;
						_this.appe=v.data.appellation;
						_this.oper=v.data.operations;
						_this.ema=v.data.email;
						_this.cod=v.data.code;
						_this.addr=v.data.address;
						_this.inter=v.data.inteee;
						_this.rem=v.data.remarks;
						_this.hab=v.data.habee;
						_this.charac=v.data.charaee;
						_this.soc=v.data.sociee;
						_this.incom=v.data.annuee;
						_this.conhb=v.data.consee;
						_this.persi=v.data.persee;
						_this.urll=v.data.url; 
						_this.coun=v.data.counee;
						_this.cust=v.data.custee;
						_this.dty=v.data.dtypee;
						_this.dnu=v.data.number;
						
					})/* .catch(function() {
						alert("出错了");
					} )*/;
				},
			//删除联系人
			DeleteShow(row) {
				console.log("删除联系人的id："+row);
				this.conId=row;
				this.dialogDelete=true;
			},
			Delete(){
				console.log("删除联系人的id："+this.conId);
				var _this=this;
				axios.get("/customer/deleteContact",
	           			//ajax请求成功的回调函数
	           			{
							params:{
								ID:this.conId
							}
	           			}
	          			).then(function(response){					          				
	           			console.log("回调成功，获取了服务器端返回的值v");
	           			console.log(response.data);					           		
	           		_this.restaurants=response.data;
	           		_this.$notify({
	           	          title: '删除成功',
	           	          type: 'success',
	           	       	  duration:2000
	           	        });
	           		showAtRight('/customer/contacts');
	           	}).catch(function(){
	           		console.log("删除失败！");
	           	});	//这个是数据的初始化
		      },
			toggleSelection(rows) {
			if (rows) {
				rows.forEach(row => {
				this.$refs.multipleTable.toggleRowSelection(row);
				});
			} else {
				this.$refs.multipleTable.clearSelection();
			}
			} 
			//加载数据字典
      },mounted:function(){
    	  this.loadAll();
			var _this=this;
			axios.get("/customer/contactDictInfo",
           			//ajax请求成功的回调函数
          			).then(function(response){					          				
           			console.log("回调成功，获取了服务器端返回的值v");
           			console.log(response.data);
           			_this.cata=response.data[0];
           			_this.sexes=response.data[1];
           			_this.dty=response.data[2];
           			_this.inte=response.data[3];
           			_this.hab=response.data[4];
           			_this.chara=response.data[5];
           			_this.soci=response.data[6];
           			_this.inc=response.data[7];
           			_this.conh=response.data[8];
           			_this.pers=response.data[9];
           			console.log(_this.sexes);
           			_this.options3[1].options=response.data[0];
           			_this.options3[2].options=response.data[1];
           			_this.options3[3].options=response.data[2];
           	}).catch(function(){
           		console.log("加载字典信息出错了");
           	});	
		}
  }
			var Ctor = Vue.extend(Main)
			new Ctor().$mount('#app')
		</script>
	</body>
</html>